.codesplit {
    font-size: $font-XS;
    line-height: 1.5;
    margin: 1.5em 0em;

    .pair {
        background: $color-lightest;
        padding: .2em 1em;
        margin: 0 0 2px 0;
        position: relative;
        &:after {
    		content: "";
    		display: table;
    		clear: both;
    	}

        .code {
            float: left;
            width: 55%;
        }
        .comment {
            float: right;
            width: 43%;
            padding: .2em 0 0 0;
            p { margin: 0; font-size: $font-XS; }
        }
    }

    .code-wide {
        .code { width: 60%; }
        .comment { width: 38%; }
    }

    .no-comment {
        background: transparent;
        .code { width: 100%; }
    }

    .line-through {
        text-decoration: none;
        .code { text-decoration: line-through; }
    }

    .bold {
        .code { font-weight: bold; }
        .comment { font-family: $sans-semibold; }
    }


    .comment-header {
        background: transparent;
        padding: 0;
        margin: 0;
        height: 0;
        overflow: visible;
        position: relative;

        .comment {
            padding: .75em 0 .5em 1em;
            background: $color-lightest;
            font-family: $sans-semibold;
            position: absolute;
            bottom: 100%;
            right: 0;
        }
        + .no-comment {
            display: none;
        }
    }


    // Offsetting
    [class^="offset"], [class*=" offset"] {
        .code { width: 100%; }
        .comment {
            position: absolute;
            z-index: 1;
            top: 100%;
            right: 0;
            float: none;
            padding: .5em;
            background: $color-lightest;
        }
    }
    .offset-top {
        .comment {
            top: auto;
            bottom: 100%;
        }
    }
}
